<template>
  	<div>
		<div id="bottom-header">
			<div class="div">
				<img
				title="查找对象"
				src="../../assets/img/手环@2x.png"
				alt="查找对象"
				@click="find()"
				/>
			</div>
			<div class="div dropdown">
				<img
				title="信息查看"
				src="../../assets/img/车辆@2x.png"
				alt="信息查看"
				/>
				<div id="info" class="dropdown-content">
					<a href="javascript:;" @click="info()">基本信息</a>
					<a href="javascript:;" @click="relation()">关联关系</a>
					<a href="javascript:;" @click="handleDynamic">动态数据</a>
					<a href="javascript:;" @click="handleTrail">轨迹数据</a>
				</div>
			</div>
			<div class="div dropdown">
				<img
				title="智能监控"
				src="../../assets/img/安全帽(1)@2x.png"
				alt="智能监控"
				/>
				<div id="monitor" class="dropdown-content">
					<a @click="handleAttrMonitor()">动态属性监控</a>
					<div class="geography-box" >
						<span>地理围栏监控</span>
						<div class="menu-box">
							<div class="menu"  @click="handleRailWatch()">雷达</div>
							<div class="menu" @click="handleWallWatch()">动态墙体</div>
							<div class="menu" @click="handleRemove()">清除</div>
						</div>
					</div>
				</div>
			</div>
			<div class="div dropdown">
				<img
				title="可视分析"
				src="../../assets/img/手环@2x.png"
				alt="可视分析"
				/>
				<div id="visulize" class="dropdown-content">
					<a href="javascript:;" @click="handleAttrAnalysis()">多维属性分析</a>
					<a href="javascript:;" @click="handleReleAnalysis()">复杂关联分析</a>
				</div>
			</div>
		</div>

    	<!-- 对象选择对话框 -->
    	<object-selector :visible="selector.visible"  @objectSelected="onObjectSelected"/>
		<!-- 对象信息查看面板 -->
		<cesium-info-pannel 
			:visible="infoPanel.visible"
			:object="infoPanel.object" 
			@signal_closeInfoPannel="slot_closeInfoPannel" />
		<!-- 关联关系查看面板 -->
		<cesium-relation-pannel 
			:visible="relationPannel.visible"
			:relations="relations"
			@signal_closeRelationPannel="slot_closeRelationPennel"
			/>
  	</div>
</template>

<script>
import CesiumInfoPannel from '../cesiums/cesiumInfoPannel.vue';
import CesiumRelationPannel from '../cesiums/cesiumRelationPannel.vue';
import ObjectSelector from "../widget/ObjectSelector.vue";
import {vm,SEND} from '../../utils/eventManage'
import {Store} from '../../utils/store'
export default {
  	components: { ObjectSelector, CesiumInfoPannel, CesiumRelationPannel },
 	name: "BottomHeader",
  	data() {
    	return {
			showDynamic:false,
			showTrail:false,
			showAttrAnalysis:false,
			showReleAnalysis:false,
			showRailWatch:false,
			showAttrMonitor: false,
      		selector: {
        		visible: false
      		},
			infoPanel: {
				visible: false,
				object: null
			},
			relationPannel: {
				visible: false
			}
    	};
  	},
	props: {
		currentSelected: {
			type: Object
		},
		relations: {
			type: Array
		}
	},
	watch: {
		currentSelected(newVal) {
			if(newVal != null){
				this.infoPanel.object = newVal.ref;
			}
		}
	},
	mounted() {

	},
	methods: {
		find() {
			this.selector.visible = !this.selector.visible;
		},
		info() {
			this.infoPanel.visible = !this.infoPanel.visible;
		},
		relation() {
			this.relationPannel.visible = !this.relationPannel.visible;
		},
		handleAttrAnalysis(){
			// this.showAttrAnalysis=!this.showAttrAnalysis;
			vm.$emit(SEND.showAttrAnalysis,{show:true})
		},
		handleReleAnalysis(){
			// this.showReleAnalysis=!this.showReleAnalysis;
			vm.$emit(SEND.showReleAnalysis,{show:true})
		},
		handleDynamic(){
			this.showDynamic=!this.showDynamic;
			vm.$emit(SEND.showInfoPop,{show:this.showDynamic})
		},
		handleTrail(){
			this.showTrail=!this.showTrail;
			vm.$emit(SEND.showTrail,{show:this.showTrail})
		},
		handleRailWatch(){
			// this.showRailWatch=!this.showRailWatch;
			// vm.$emit(SEND.showRailWatch,{show:this.showRailWatch})
				this.showRailWatch=!this.showRailWatch;
			vm.$emit(SEND.showRailWatch,{show:true})
			vm.$emit(SEND.showRadarAttr,{
                show:true
            })
		},
		getPositions(positions){
			let arr=[];
			for(let item of positions){
				arr.push([item.longitude,item.latitude])
			}
			arr.push([positions[0].longitude,positions[0].latitude])
			return arr
		},
		handleWallWatch(){
			let mapControl=Store.oneGis()
			mapControl.measure.terrainPolygon(positions => {
               console.log(positions,566666)
			   mapControl.plugins.wallManage.add({
				   positions:this.getPositions(positions)
			   })
			   mapControl.draw.clear()
            });
			vm.$emit(SEND.showWallWatch,{show:true})
		},
		handleRemove(){
			let mapControl=Store.oneGis()
			mapControl.plugins.wallManage.clear();
			mapControl.plugins.radarManage.clearEllipsoid()
		},
		handleAttrMonitor(){
			this.showAttrMonitor = !this.showAttrMonitor;
			vm.$emit(SEND.showAttrMonitor, {
				show: true,
			});
		},
    	onObjectSelected(data){
			this.selector.visible = data.status;

			// let Cesium = window.cesium;
			let Cesium = window.Cesium;
			if(data.oid != null){
				/*window.viewer.trackedEntity = 
					window.viewer.entities.getById(data.oid);*/
				window.viewer.flyTo(window.viewer.entities.getById(data.oid), {
					offset: {
						heading: Cesium.Math.toRadians(0.0),
						pitch: Cesium.Math.toRadians(-25),
						range: 200
					}
				})
			}
    	},
		slot_closeInfoPannel(status) {
			this.infoPanel.visible = status;
		},
		slot_closeRelationPennel(status) {
			this.relationPannel.visible = status;
		}
	},
};
</script>

<style lang="less">
// 菜单尺寸
@dropdown-item-height: 1.875rem;

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-image: url("../../assets/img/menu.png");
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
//   width: 100%;
  width: 130px;
  border-radius: 3px;
  left: 50%;
  transform: translateX(-50%);
  a {
    color: white;
    text-decoration: none;
    display: block;
    height: @dropdown-item-height;
    line-height: @dropdown-item-height;
    font-size: 1rem;

    &:hover {
      background-color: rgb(3, 146, 212);
      border-radius: 3px;
      cursor: pointer;
    }
  }
  .geography-box{
	  color: #fff;
	  font-size: 1rem;
	  height: @dropdown-item-height;
    line-height: @dropdown-item-height;
		  position: relative;
	  &:hover {
      background-color: rgb(3, 146, 212);
      border-radius: 3px;
      cursor: pointer;
	  .menu-box{
		  display: block;
	  }
    }
	.menu-box{
		display: none;
		position: absolute;
		bottom: 0;
		right: -58%;
		z-index: 10;
		  background-image: url("../../assets/img/menu.png");
  			box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
		.menu{
			text-align: center;
			 height: @dropdown-item-height;
    line-height: @dropdown-item-height;
		  padding: 0 5px;
		&:hover {
		  background-color: rgb(3, 146, 212);
		  border-radius: 3px;
		  cursor: pointer;
		  }
		}
	}
  }
}

#info {
  top: -(4 * @dropdown-item-height);
}

#monitor {
  top: -(2 * @dropdown-item-height);
}

#visulize {
  top: -(2 * @dropdown-item-height);
}

.dropdown:hover .dropdown-content {
  display: block;
}

@bottom-header-height: 3.1875rem;
#bottom-header {
  // position: relative;
  position: absolute;
  bottom: 5%;
  width: 59%;
  height: @bottom-header-height;
  left: 50%;
  transform: translateX(-50%);
  background-image: url("../../assets/img/bottom.png");
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
  align-items: center;
  z-index: 2;
  .div {
    width: 10%;
    text-align: center;
    img {
      width: 30%;
      cursor: pointer;
    }
  }
}
</style>
